<template>
  <!-- 
    新增编辑组件
    仅仅展示UI试图组件，不参与任何的逻辑编辑
   -->
  <el-dialog custom-class="add-and-edit-card-ui" :close-on-click-modal="false" center top="5vh" :title="dialogForm.title"
    :visible.sync="dialogForm.dialogVisible" width="75%">
    <el-form label-position="right"  label-suffix=":" label-width="120px" :model="dialogForm.form" :rules="rules"
      ref="AddAndEditCardUIRef">
      <el-card class="mb20">
        <div class="info">车辆信息</div>
        <el-form-item label="车主姓名" prop="personName"><el-input v-model="dialogForm.form.personName" clearable
            :disabled="(formItems.personName||{}).disabled"></el-input></el-form-item>
        <el-form-item label="联系方式" prop="phoneNumber"><el-input v-model="dialogForm.form.phoneNumber" clearable
            :disabled="(formItems.phoneNumber||{}).disabled"></el-input></el-form-item>
        <el-form-item label="车辆号码" prop="carNumber"><el-input v-model="dialogForm.form.carNumber" clearable
            :disabled="(formItems.carNumber||{}).disabled"></el-input></el-form-item>
        <el-form-item label="车辆品牌" prop="carBrand"><el-input v-model="dialogForm.form.carBrand" clearable
            :disabled="(formItems.carBrand||{}).disabled"></el-input></el-form-item>
      </el-card>
      <el-card>
        <div class="info">最后一次月卡缴费信息</div>
        <el-form-item label="有效日期" prop="payTime">
          <el-date-picker v-model="dialogForm.form.payTime" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="支付金额" prop="paymentAmount"><el-input v-model="dialogForm.form.paymentAmount"
            clearable></el-input></el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <el-select v-model="dialogForm.form.paymentMethod" placeholder="请选择" clearable>
            <el-option v-for="item in payMethodList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-card>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">重置</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import CheckFormItem from '@/utils/checkElFormItemProp'
export default {
  name: 'AddAndEditMonthCardUI',
  props: {
    dialogForm: {
      type: Object,
      required: true,
      default: () => ({})
    },
    formItems:{
      type: Object,
      required: false,
      default: () => ({})
    }
  },
  data() {
    return {

    }
  },
  beforeCreate() {
    this.payMethodList = [{ id: 'Alipay', name: '支付宝' }, { id: 'WeChat', name: '微信' }, { id: 'Cash', name: '线下' }]
    this.rules = {
      personName: [{ required: true, validator: CheckFormItem.checkPersonName, trigger: 'blur' }],
      phoneNumber: [{ required: true, validator: CheckFormItem.checkPhoneNumber, trigger: 'blur' }],
      carNumber: [{ required: true, validator: CheckFormItem.checkCarNumber, trigger: 'blur' }],
      carBrand: [{ required: true, message: '请输入车辆品牌', trigger: 'blur' }],
      payTime: [{ required: true, message: '请选择支付时间', trigger: 'change' }],
      paymentAmount: [{ required: true, validator: CheckFormItem.checkPaymentAmount, trigger: 'blur' }],
      paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
    }
  },
  methods: {
    resetForm() {
      this.$refs.AddAndEditCardUIRef.clearValidate()//移除校验
      this.$emit('resetForm')
    },
    confirm() {
      this.$refs.AddAndEditCardUIRef.validate((valid) => {
        if (valid) {
          this.dialogForm.dialogVisible = false
          this.$emit('comfirmForm')
          return
        }
        return false;
      });

    },
  },
  computed: {},
  watch: {
    'dialogForm.dialogVisible': {
      handler(value) {
        if (value) {
          this.$nextTick(() => {
            this.$refs.AddAndEditCardUIRef.clearValidate()//打开就移除校验
          })
        }
      }
    }
  }
}
</script>

<style lang="scss">
.add-and-edit-card-ui {
  .el-dialog__title {
    display: block;
    text-align: left;
  }

  .el-dialog__body {
    background-color: #f5f6f8;

    .el-card__body {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 44px repeat(2, 62px);
      grid-auto-rows: 62px;

      .info {
        grid-column: 1/-1;
        grid-row: 1/2;
        font-size: 16px;
        font-weight: 500;
        line-height: 36px;
        margin-bottom: 8px;

      }

    }

  }
}
</style>